<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 200px;
				height: 200px;
				background: pink;
			}
		</style>
		<script src="../js/vue.js"></script>
		<script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.js"></script>
	</head>
	<body>
	 <div id="app">
			
		<!-- <button v-on:click="toggle">点击显示和隐藏</button> -->	
		<button v-on:click="msg=!msg">点击显示和隐藏</button>
	   <div class="box" v-show="msg"></div>
	
	<input type="number" v-model="num1" /> + <input type="number" v-model="num2" />
	<input type="button" value=" = "  v-on:click="add"  /> <input type="text" v-model="total"   />
	<hr /><br /> <br />
	
	<div>
		用户名： <input type="text" placeholder="请输入用户名"  v-model="username"   /> <br /> <br />
		密 码： <input type="password"  placeholder="请输入密码" v-model="password"  /><br /> <br />
		<input type="button" value="登录" @click="login"  />
	</div>
	
	<hr /><br /> <br />
	
	<!--
	   event事件阻止冒泡和默认事件
	 <a href="http://www.baidu.com" @click="target($event)">百度一下</a>
	
	
	<div class="box" @click="getFather">
		<button @click="getSon($event)">我是子元素</button>
	</div> 
	 
	 -->
	  
	  <!-- 事件修饰符阻止冒泡和默认事件 -->
		  
		<a href="http://www.baidu.com" @click.prevent="target2()">百度一下</a>
		
		<div class="box" @click.self="getFather2()">
		<!-- <div class="box" @click.capture="getFather2()"> -->
			<!-- <button @click.stop="getSon2()">我是子元素</button> -->
			<button @click="getSon2()">我是子元素</button>
		</div> 
		  <p @click.once="tt">我是一次性事件</p>
		  		  
		<hr /><br /> <br />  
		  
		<input type="text"  @keydown="getCode($event)" />
		
		<input type="text"  @keydown.enter="pp" />
		  
	</div>
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
			   msg:true,
			   num1:0,
			   num2:0,
			   total:0,			  
			   username:'',
			   password:''

			},
			methods:{
				toggle(){
					this.msg=!this.msg
				},
				add(){
					//console.log(typeof this.num1)
					this.total=parseInt(this.num1)+parseInt(this.num2);
				},
				login(){
					$.ajax({
						url:`https://api.apiopen.top/developerLogin`,
						type:'POST',
						data:{
							name:this.username,
							passwd:this.password							
						},
						success(data){
							console.log(data)
							if(data.code==200){
								window.open('welcome.html')
							}
						}
					})
				},
				target(e){
					//阻止默认事件
					console.log(e)
					e.preventDefault()
				},
			    getFather(){
					console.log('我是父元素！！')
				},
				getSon(e){
					//阻止冒泡
					e.stopPropagation()
					console.log('我是子元素')
				},
				target2(){
					
				},
				getSon2(){
					console.log('事件修饰符son')
				},
				getFather2(){
					console.log('事件修饰符father')
				},
				tt(){
					console.log('我是一次性事件')
				},
				getCode(e){
					//console.log(e.key,e.keyCode)
					if(e.keyCode==13){
						console.log('发起请求')
					}
				},
				pp(){
					console.log('按下了enter键')
				}
			}
		
		})
		
		
		
	</script>
		
		<!-- 事件修饰符：
		stop、prevent、once、self、capture -->
		
		<!-- 键盘修饰符：
		up down left right enter delete tab esc ctrl alt shift meta 
		-->
	<div style="height: 500px;"></div>	
	</body>
</html>
